<template>
  <vxe-modal
    v-model="dialogVisible"
    title="在线用户"
    resize
    show-zoom
    :width="isMobile?'100%':'50%'"
    show-footer
  >
    <vxe-table
      :data="tableData"
      :sort-config="{remote:false}"
    >
      <vxe-column field="mobile" title="手机号" />
      <vxe-column field="realname" title="姓名" />
      <vxe-column field="loginTime" title="登录时间" sortable />
      <vxe-column field="host" title="登录IP" />
      <vxe-column field="userAgent" title="系统/浏览器" show-overflow />
      <vxe-column field="op" title="操作">
        <template #default="{row}">
          <vxe-button v-if="myToken !== row.token" type="text" status="primary" @click="tickoutByToken(row.token)">下线</vxe-button>
        </template>
      </vxe-column>
    </vxe-table>
    <template #footer>
      <vxe-button status="default" content="关闭" @click="dialogVisible=false" />
    </template>
  </vxe-modal>
</template>

<script>
import Api from '@/api/upms/user'
import { VxeModalMixin } from '@/mixins/vxe/VxeModalMixin'
export default {
  name: 'UpmsUserOnlineDialog',
  mixins: [VxeModalMixin],
  data() {
    return {
      tableData: [],
      myToken: this.$store.state.user.token
    }
  },
  computed: {

  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      Api.onlineUserList().then(({ data }) => {
        this.tableData = data
      })
    },
    tickoutByToken(token) {
      Api.tickoutByToken(token).then(({ code, msg }) => {
        this.$message({ type: code === 200200 ? 'success' : 'error', message: msg || '操作成功' })
        this.getList()
      })
    }
  }
}
</script>

<style>

</style>
